<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{layui/css/layui.css}" href="../../static/layui/css/layui.css" media="all">
    <script src="../../static/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="layui-container" style="width: 850px;height: 1000px;margin-left: 10px">

    <div>
        <a href="/account/redirect/index">首页</a>&nbsp;&nbsp;|&nbsp;&nbsp;欢迎回来！
        <!--        <a href="/account/redirect/order" th:text="${session.user.nickname}"></a>-->
        <a href="/account/logout">&nbsp;&nbsp;&nbsp;<button class="layui-btn layui-btn-warm layui-btn-radius">退出</button></a>
        <div>
            <h3 class="layui-colla-title" style="font-size: large">订单详情</h3>
            <div style="height: 30px">
                <label class="td_lable" style="font-size: large">订单ID：</label>    <label style="font-size: large"  id="id"/>
            </div>
            <div style="height: 30px">
                <label style="font-size: large">总价：</label> <label style="font-size: large" id="price"/>
            </div>
            <div style="height: 250px">
                <label style="height: 10px;font-size: large">菜品：</label>
                <div style="overflow-scrolling: auto">
                    <table class="layui-hide" id="test" lay-filter="test" ></table>
                </div>
            </div>
            <div style="height: 30px">
                <label style="font-size: large">订单状态：</label>  <label style="font-size: large"  id="state"/>
            </div>
            <div style="height: 60px">
                <label style="font-size: large">送餐地址：</label>
                <div style="height: 10px">
                    <label style="font-size: large" id="address"/>
                </div>
            </div>
            <div style="height: 100px">
                <label style="font-size: large">收货人：</label>
                <div style="height: 60px">
                    <div>
                        <label style="font-size: large">姓名：</label><label style="font-size: large" id="name"/>
                    </div>
                    <div>
                        <label style="font-size: large">电话：</label><label style="font-size: large" id="telephone"/>
                    </div>

                </div>
            </div>
            <div style="height: 100px">
                <button class="layui-btn" id="confirm" type="submit" style="left: 20px">
                    确认
                </button>
                <button class="layui-btn" id="delete" type="submit" style="left: 120px;">
                    删除
                </button>
                <button class="layui-btn" id="quit" type="submit" style="left: 220px;">
                    退出
                </button>
            </div>
        </div>
        <script th:src="@{/layui/layui.js}" src="../../static/layui/layui.js" charset="utf-8"></script>
        <script>
            var ordergson;
            function getQueryVariable(variable)
            {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    if(pair[0] == variable){return pair[1];}
                }
                return(false);
            }
            let user_id = getQueryVariable("userId");
            let order_id = getQueryVariable("orderId");

            jQuery(document).ready(function(){
                $.ajax({
                    type:"GET",
                    url:"http://localhost:8080/order/findById/"+order_id,
                    xhrFields:{withCredentials:true},
                    success:function(data){
                        ordergson = data.data;
                        reloadDom();
                    },
                });

                $("#confirm").on("click",function(){
                    layer.confirm('确认订单已完成',function(index){
                        let url = "http://localhost:8080/order/confirmOrder?userId="+user_id+"&orderId="+ordergson.id;
                        ajaxconfirm(url);
                        layer.close(index);
                        //window.location.reload(true);
                        location.replace(location.href);
                    });
                });
                $("#delete").on("click",function(){
                    layer.confirm('是否订单删除',function(index){
                        let url = "http://localhost:8080/order/deleteOrder?userId="+user_id+"&orderId="+ordergson.id;
                        ajaxdel(url);
                        layer.close(index);
                        window.location.href="orderTable.html?userId="+user_id;
                    });
                });
                $("#quit").on("click",function(){
                    window.location.href="orderTable.html?userId="+user_id;
                });
            })

            function reloadDom(){
                $("#id").text(ordergson.id);
                $("#price").text(ordergson.totalPrice);
                $("#state").text(ordergson.state);
                $("#address").text(ordergson.user.address);
                $("#name").text(ordergson.user.username)
                $("#telephone").text(ordergson.user.telephone);
            }

            function ajaxconfirm(url){
                $.ajax({
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    },
                    url:url,
                    type:"PUT"
                });
            };
            function ajaxdel(url){
                $.ajax({
                    url: url,
                    type: "DELETE",
                    contentType: "application/json;"
                });
            }

            layui.use('table', function(){
                var table = layui.table;

                table.render({
                    elem: '#test'
                    ,url:'http://localhost:8080/order/findOrderItemList?OrderId='+order_id
                    ,title: '订单项列表'
                    ,dataType: 'jsonp'
                    ,width:'100%'
                    ,crossDomain: true
                    ,id: 'testReload'
                    ,cols: [
                        [
                            {
                                field: 'name', width: 200, title: '菜品', templet: function (data) {
                                    return data.menu.name
                                }
                            }
                            ,{field: 'image', width: 200,title: '图片',align: 'center',sort:false,templet:function (data){
                                return '<div οnclick="photograph(this)"><img src='+data.menu.imgUrl+'></div>'
                            }
                        }
                            ,{field: 'price', width: 100, title: '单价', templet: function (data) {
                                return data.menu.price.toFixed(2)
                            }
                        }
                            ,{field:'desc', width:100, title: '描述',templet:function(data){
                                return data.menu.description
                            }
                        }
                            ,{field:'catalog', width:100, title: '类别',templet:function(data){
                                return data.menu.catalog.catalog
                            }
                        }
                            ,{field:'num', width:100, title: '数量',templet:function(data){
                                return data.number+"份"
                            }
                        }
                        ]
                    ]
                    ,page: true
                });
            });

        </script>
    </div>
</div>
</body>
</html>